<template>
  <el-carousel
    :interval="2500"
    type="card"
    autoplay
    arrow="never"
    indicator-position="none"
    ref="carousel"
    @click.native="linkTo"
    height="3.64rem"
  >
    <el-carousel-item v-for="item in img" :key="item.url">
      <el-image class="content-banner-img" :src="item.url" alt></el-image>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
export default {
  name: "content-banner",
  data() {
    return {
      // 图片地址数组
      img: [
        {
          url: require("@/assets/content-banner/content-banner1.jpg"),
          link: "https://www.sdwcvc.edu.cn/djgz/",
        },
        {
          url: require("@/assets/content-banner/content-banner2.jpg"),
          link: "/teaching",
        },
        {
          url: require("@/assets/content-banner/content-banner3.jpg"),
          link: "https://www.sdwcvc.edu.cn/zs/",
        },
        {
          url: require("@/assets/content-banner/content-banner4.jpg"),
          link: "https://www.sdwcvc.edu.cn/xxwmxywz/",
        },
      ], // 图片父容器高度
    };
  },
  methods: {
    linkTo() {
      //跳转路由
      let activeIndex = this.$refs.carousel.activeIndex;
      // console.log(this.img[activeIndex].link);
      if (this.img[activeIndex].link.startsWith("http")) {
        window.location.href = this.img[activeIndex].link;
      } else if (this.img[activeIndex].link.startsWith("/")) {
        this.$router.push({
          path: this.img[activeIndex].link,
          query: { key: "创新平台", show: 2 },
        });
      } else {
        console.error("图片链接不对");
      }
    },
  },
};
</script>
<style scoped>
/* 轮播图图片 */
.content-banner-img {
  width: 100%;
  height: 100%;
}
</style>
